<template>
  <div class="shop_container">
       <!-- @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" -->
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <div class="ball" v-show="isBall" ref="ball"></div>
    </transition>
    
    <!-- 轮播图区域  -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :dataList="imgList" :isFull="isFull"></swiper>
        </div>
      </div>
    </div>
    <!-- 价格区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{info.goodName}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            <span>市场价:&nbsp;</span>
            <del>&nbsp;￥{{info.oldPrice}}</del>&nbsp;&nbsp;
            <span>销售价:&nbsp;</span>
            <span class="now">&nbsp;￥{{info.newPrice}}</span>
          </p>
          <p>
            <span>购买数量:&nbsp;</span>&nbsp;
            <numBox :min="min" :max="max" @setCount="getSelectCount"></numBox>
          </p>
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small" @click="addGoodToShopCar">加入购物车</mt-button>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>
            <span>商品货号:</span>
            <span>{{info.goodCode}}</span>
          </p>
          <p>
            <span>库存数量:</span>
            <span>{{info.count}}</span>
          </p>
          <p>
            <span>上架时间:</span>
            <span>{{info.addTime}}</span>
          </p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="goodDesc(info.id)">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="goodContent(info.id)">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import swiper from "../subComponent/swiper.vue";
import numBox from "../subComponent/numCount.vue";
export default {
  data() {
    return {
      min: 1,
      max: 9,
      isFull: false,
      isBall:false,
      goodCount:1,
      imgList: [
        {
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1159631041,330735827&fm=26&gp=0.jpg"
        },
        {
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=263574944,2415957904&fm=26&gp=0.jpg"
        },
        {
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3596037391,2145479091&fm=26&gp=0.jpg"
        }
      ],
      info: {
        goodName: "苹果6plus玫瑰金限量版",
        oldPrice: 2399,
        newPrice: 2199,
        goodCode: "SD458796",
        count: 52,
        addTime: "2015-12-31"
      }
    };
  },
  created(){
    this.max = this.info.count;
  },
  methods: {
    goodDesc(id) {
      this.$router.push({ name: "goodDesc", param: { id: id } });
    },
    goodContent(id) {
      this.$router.push({ name: "goodContent", param: { id: id } });
    },
    getSelectCount(count){
      //子组件向父组件传值
      // console.log(count);
      this.goodCount = count;
    },
    addGoodToShopCar(){
      this.isBall = !this.isBall;
      //添加商品到购物车
      let good = {
        id:this.$route.params.id,
        price:this.info.newPrice,
        count:this.goodCount,
        selected:true
      }
      this.$store.commit("addToCar",good);
    },
    beforeEnter(el){
        el.style.transform="translate(0,0)";
    },
    enter(el, done){
        el.offsetWidth;
        //动态获取动画偏移的位置

        let ballPosition = this.$refs.ball.getBoundingClientRect();
        let bragePosition = document.getElementById('brage').getBoundingClientRect();

        let xDist = bragePosition.left - ballPosition.left;
        let yDist = bragePosition.top - ballPosition.top;
        el.style.transform = `translate(${xDist}px,${yDist}px)`;
        el.style.transition = "all 1s cubic-bezier(0,-0.44,.59,.35)"
        done();
    },
    afterEnter(el){
        this.isBall = !this.isBall;
    }
  },
  components: {
    swiper,
    numBox
  }
};
</script>

<style lang="less" scoped>
.shop_container {
    .ball{
        width: 15px;
        height: 15px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        z-index: 99;
        left: 150px;
        top:390px;
    }
  .price {
    .now {
      font-size: 16px;
      color: red;
      font-weigth: bold;
    }
  }
  .mui-card-footer {
    display: block !important;
    button {
      margin: 15px 0;
    }
  }
}
</style>

